<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<script>
  var myCan = document.getElementById("myCanvas");
  // 设置画笔
  var ct = myCan.getContext("2d");

  /*  // 渐变:
    ct.rect(10,20,300,200);
    // ct.stroke();
    // 1.线性渐变

    // (1)创建线性渐变对象
    var cl=ct.createLinearGradient(10,20,310,220);
    // var cl=ct.createLinearGradient(10,20,310,20);
    // (2)设置颜色与偏移量
    cl.addColorStop(0,"orangered");
    cl.addColorStop(0.3,"green");
    cl.addColorStop(0.6,"pink");
    cl.addColorStop(0.8,"blue");
    cl.addColorStop(1,"yellow");
    // 填充
    ct.fillStyle=cl;
    ct.fill();

    ct.stroke();*/

  // 1-1线性渐变-线段渐变
  /* ct.beginPath();
   ct.moveTo(400, 10);
   ct.lineTo(600, 500);

   // 创建线段渐变对象
   var cl = ct.createLinearGradient(400, 10, 600, 500);
   // 设置颜色与偏移量
   cl.addColorStop(0, "orangered");
   cl.addColorStop(0.3, "green");
   cl.addColorStop(0.6, "pink");
   cl.addColorStop(0.8, "blue");
   cl.addColorStop(1, "yellow");
   // 填充
   ct.strokeStyle = cl;
   ct.lineWidth = 20;
   ct.stroke();
   ct.closePath();
 */

  //2. 径向渐变
  /* ct.beginPath();
   ct.arc(200, 200,100, 0, 2 * Math.PI, false);

   // 创建径向渐变对象
   var cr=ct.createRadialGradient(200,200,50,200,200,100);
   // 设置颜色与偏移量
   cr.addColorStop(0, "orangered");
   cr.addColorStop(0.3, "green");
   cr.addColorStop(0.6, "pink");
   cr.addColorStop(0.8, "blue");
   cr.addColorStop(1, "yellow");
   // 填充
   ct.fillStyle=cr;
   ct.fill();
   ct.stroke();
   ct.closePath();*/

  // 径向渐变--圆形渐变
/*  ct.beginPath();
  ct.arc(400, 400, 100, 0, 2 * Math.PI, false);
  //   创建圆形渐变对象
  var cr = ct.createRadialGradient(400, 400, 50, 400, 400, 100);
  // 设置颜色与偏移量
  cr.addColorStop(0, "orangered");
  cr.addColorStop(0.3, "green");
  cr.addColorStop(0.6, "pink");
  cr.addColorStop(0.8, "blue");
  cr.addColorStop(1, "yellow");
  // 填充
  ct.strokeStyle = cr;
  ct.lineWidth = 100;
  ct.stroke();
  ct.closePath();*/

  // 阴影
  /*  语法:
      阴影的横坐标位移量:ct.shadowOffsetX
    阴影的纵坐标位移量:ct.shadowOffsetY
    阴影的颜色:ct.shadowColor
    阴影的模糊度:ct.shadowBlur*/

  ct.beginPath();
  ct.arc(400, 400, 100, 0, 2 * Math.PI, false);
  //   创建圆形渐变对象
  var cr = ct.createRadialGradient(400, 400, 50, 400, 400, 100);
  // 设置颜色与偏移量
  cr.addColorStop(0, "orangered");
  cr.addColorStop(0.3, "green");
  cr.addColorStop(0.6, "pink");
  cr.addColorStop(0.8, "blue");
  cr.addColorStop(1, "yellow");
  // 填充
  ct.strokeStyle = cr;
  ct.lineWidth = 100;

  // 设置阴影
  ct.shadowOffsetX=10;
  ct.shadowOffsetY=20;
  ct.shadowColor="gray"
  ct.shadowBlur=10;

  ct.stroke();
  ct.closePath();


</script>

